import React, { useState, useEffect } from 'react';
import {
  Box,
  Card,
  CardBody,
  Flex,
  Heading,
  SimpleGrid,
  Stat,
  StatArrow,
  StatHelpText,
  StatLabel,
  StatNumber,
  Text,
  useColorModeValue,
} from '@chakra-ui/react';
import { FaFire } from 'react-icons/fa';
import StatsChart from '../components/progress/stats-chart';
import StreakCounter from '../components/progress/streak-counter';
import BadgeDisplay from '../components/progress/badge-display';
import progressData from '../data/progress.json';
import { ProgressData } from '../types';

const Progress: React.FC = () => {
  const [progress, setProgress] = useState<ProgressData | null>(null);
  const cardBg = useColorModeValue('white', 'gray.700');
  const borderColor = useColorModeValue('gray.200', 'gray.600');

  useEffect(() => {
    setProgress(progressData as ProgressData);
  }, []);

  if (!progress) {
    return (
      <Box textAlign="center" py={10}>
        <Text>Loading progress data...</Text>
      </Box>
    );
  }

  const { stats, streak, badges } = progress;

  return (
    <Box maxW="container.md" mx="auto">
      <Heading as="h2" size="lg" mb={6}>
        Your Progress
      </Heading>

      <SimpleGrid columns={{ base: 1, md: 3 }} spacing={6} mb={8}>
        <Card bg={cardBg} border="1px" borderColor={borderColor}>
          <CardBody>
            <Stat>
              <StatLabel>Words Learned</StatLabel>
              <StatNumber>{stats.wordsLearned}</StatNumber>
              <StatHelpText>
                <StatArrow type="increase" />
                {stats.wordsLearnedChange} from last week
              </StatHelpText>
            </Stat>
          </CardBody>
        </Card>

        <Card bg={cardBg} border="1px" borderColor={borderColor}>
          <CardBody>
            <Stat>
              <StatLabel>Practice Score</StatLabel>
              <StatNumber>{stats.practiceScore}%</StatNumber>
              <StatHelpText>
                <StatArrow type={stats.practiceScoreChange >= 0 ? 'increase' : 'decrease'} />
                {Math.abs(stats.practiceScoreChange)}% from last week
              </StatHelpText>
            </Stat>
          </CardBody>
        </Card>

        <Card bg={cardBg} border="1px" borderColor={borderColor}>
          <CardBody>
            <Flex alignItems="center">
              <FaFire color="orange" />
              <Stat ml={2}>
                <StatLabel>Learning Streak</StatLabel>
                <StatNumber>{streak.current} days</StatNumber>
                <StatHelpText>Best: {streak.best} days</StatHelpText>
              </Stat>
            </Flex>
          </CardBody>
        </Card>
      </SimpleGrid>

      <Card bg={cardBg} border="1px" borderColor={borderColor} mb={8}>
        <CardBody>
          <Heading as="h3" size="md" mb={4}>
            Learning Progress
          </Heading>
          <StatsChart data={stats.chartData} />
        </CardBody>
      </Card>

      <SimpleGrid columns={{ base: 1, md: 2 }} spacing={6} mb={8}>
        <Card bg={cardBg} border="1px" borderColor={borderColor}>
          <CardBody>
            <Heading as="h3" size="md" mb={4}>
              Current Streak
            </Heading>
            <StreakCounter streak={streak} />
          </CardBody>
        </Card>

        <Card bg={cardBg} border="1px" borderColor={borderColor}>
          <CardBody>
            <Heading as="h3" size="md" mb={4}>
              Achievements
            </Heading>
            <BadgeDisplay badges={badges} />
          </CardBody>
        </Card>
      </SimpleGrid>
    </Box>
  );
};

export default Progress;
